Conceptual Response to Project Brief
Looking back on Assignment 1, I initially focused on the crop function
as the primary creative context guiding my creative tool. As
development progressed, the concept of collage-ing emerged when
analysing image manipulation functions
(i.e. re-arrangement and re-orientation). At this point, my
vision evolved to a creative tool based on cropping and collage-ing.
Next was thinking about what features to implement and in a way that, one: satisfies an interaction design principle, and two: is novel.
Novelty was definitely the hardest condition to accomplish, especially with my creative context of cropping and collage-ing, where their functions are inherently very basic. In addition, my worth and purpose of “satisfaction” and “intuitiveness” further restricts creativity and novelty, because “creativity” is closely related to “chaos” or “disorder,” which are complete opposites of my values!
I tried brainstorming novelty within the interaction design principles, for example:
And lastly, Information Design: The aesthetical way that information is portrayed. It was in this design principle that I achieved novelty
My vision for my creative tool was something that could “crop and re-arrange images.” The thought-process I had was:
Next was thinking about what features to implement and in a way that, one: satisfies an interaction design principle, and two: is novel.
Novelty was definitely the hardest condition to accomplish, especially with my creative context of cropping and collage-ing, where their functions are inherently very basic. In addition, my worth and purpose of “satisfaction” and “intuitiveness” further restricts creativity and novelty, because “creativity” is closely related to “chaos” or “disorder,” which are complete opposites of my values!
I tried brainstorming novelty within the interaction design principles, for example:
- Feedback: applying little size-scaling animation to a cropped image where it seems like it “pops out” of the original image, or a sound-effect is played when a crop action is performed. The problem with these two is that the sound-effect feedback is not novel at all, and with the size-scaling animation, though it is fairly novel, I felt that the code required exceeded my skillset.
- Mapping: have keybinds for actions such as copy&paste, deleting cropped images, or cropping images. The same problem arose that keybinds are not a novel feature.
And lastly, Information Design: The aesthetical way that information is portrayed. It was in this design principle that I achieved novelty
My vision for my creative tool was something that could “crop and re-arrange images.” The thought-process I had was:
- When a crop is made, where does the cropped image go?
- Does the original image just disappear, leaving only the cropped image on the canvas?
- But just having a cropper function is quite boring. How about we combine collage-ing and make it so you can crop and collage!
- How would I display this?
- I would like users to have the ability to quickly, and easily, crop and collage at the same time, keeping the number of actions low.
- How about… putting both functions on one screen! And have them be differentiated by being in separate sections!
Technical Approach
Two external libraries run my creative tool, each having their own
respective section.
The left section, responsible for the cropping function, is executed by “cropper.js” (https://fengyuanchen.github.io/cropperjs/). Cropper.js handles:
The left section, responsible for the cropping function, is executed by “cropper.js” (https://fengyuanchen.github.io/cropperjs/). Cropper.js handles:
- Displaying the imported image
- Interactive crop area and preview (drag, resize)
- The different shape crops
- Drag-drop of cropped images
- Resizing and rotating of cropped images via transformer anchor points
- Layering of images
- Selecting/deselecting images
- The canvas which is being exported
Peer User Test Reflection
Reflecting on the responses I received from my “Peer User Prototype
Test” form, there were a number of questions that bore answers that
were more or less similar, or answers that I expected. These included:
Question 2: Purpose of the shape icons
Most answered: “Select crop shape”
This tells me that the information design of the icons are clear enough for first-time users to understand its purpose without the need of extra guidance (e.g. pop-up instructions or labels), and reassures me that if I were to add a new shape icon to the group, users would understand its purpose.
Question 5 & 7: Out of 10, how intuitive were the controls and how satisfied did you feel when using my creative tool?
Most answered (average): “8”
This is comforting to see as my worth and purpose was to “provide users a smooth, satisfying and engaging experience.” It gives affirmation that I'm going down my desired path with this creative tool.
There were also some questions that harbored interesting responses. These responses provided great insight into improving my creative tool, especially:
My creative tool had 3 hidden keybinds that were linked to actions such as ctrl c&v to copy and paste, and in Question 8 where I asked how many of these 3 did people successfully use, the majority either said they used only 1 or none at all.
A possible reason for this unknowing might be due to the perception that the creative tool is a prototype, hence is unexpected for any mapping element to be implemented, unless it is directly told to the users via instructions.
Another reason could be the limited testing time provided, where both these reasons lead to the thought of keybinds existing, as implausible.
So following onto Question 10 where I asked if there were any features that people wanted to see be implemented, many answers said that a guide or manual which displays the keybinds would be helpful. I agree with them and I plan to add some text at the bottom which displays those keybinds.
There was a response that caught my eye, suggesting the implementation of an image layering system, to help with easier collaging. I am very keen on developing this system, though it does seem a bit too ambitious for the current scope of this assignment. It might have to be something I work on my own time, but for the time being, I will keep note of this fantastic idea.
Other responses focused on the collage-creative aspect, suggesting to add stickers, filters, background/border-colour options, or more variety of shapes.
Although they are very great ideas, I am still focusing on the “quality-of-life” side of things, such as access to more controls or adding a keybind guide (list of future plans can be found under Project Timeline below). Once that is well progressed, then will I consider developing more of the creative side.
Question 2: Purpose of the shape icons
Most answered: “Select crop shape”
This tells me that the information design of the icons are clear enough for first-time users to understand its purpose without the need of extra guidance (e.g. pop-up instructions or labels), and reassures me that if I were to add a new shape icon to the group, users would understand its purpose.
Question 5 & 7: Out of 10, how intuitive were the controls and how satisfied did you feel when using my creative tool?
Most answered (average): “8”
This is comforting to see as my worth and purpose was to “provide users a smooth, satisfying and engaging experience.” It gives affirmation that I'm going down my desired path with this creative tool.
There were also some questions that harbored interesting responses. These responses provided great insight into improving my creative tool, especially:
Question 10: Are there any features that people would like to
see implemented?
My creative tool had 3 hidden keybinds that were linked to actions such as ctrl c&v to copy and paste, and in Question 8 where I asked how many of these 3 did people successfully use, the majority either said they used only 1 or none at all.
A possible reason for this unknowing might be due to the perception that the creative tool is a prototype, hence is unexpected for any mapping element to be implemented, unless it is directly told to the users via instructions.
Another reason could be the limited testing time provided, where both these reasons lead to the thought of keybinds existing, as implausible.
So following onto Question 10 where I asked if there were any features that people wanted to see be implemented, many answers said that a guide or manual which displays the keybinds would be helpful. I agree with them and I plan to add some text at the bottom which displays those keybinds.
There was a response that caught my eye, suggesting the implementation of an image layering system, to help with easier collaging. I am very keen on developing this system, though it does seem a bit too ambitious for the current scope of this assignment. It might have to be something I work on my own time, but for the time being, I will keep note of this fantastic idea.
Other responses focused on the collage-creative aspect, suggesting to add stickers, filters, background/border-colour options, or more variety of shapes.
Although they are very great ideas, I am still focusing on the “quality-of-life” side of things, such as access to more controls or adding a keybind guide (list of future plans can be found under Project Timeline below). Once that is well progressed, then will I consider developing more of the creative side.
Project Timeline
Week 1-2: Started thinking of what creative concept to base my
creative tool of
Week 3-4: Worked on Project Speculation
Week 4-5: Watched tutorials on Konva and explored possible features in class
Week 6: Developing Prototype
Week 7: Developing Prototype and submission for Peer User Testing and Assignment 2
Minor deviations from initial plans
Future plans:
Week 3-4: Worked on Project Speculation
Week 4-5: Watched tutorials on Konva and explored possible features in class
Week 6: Developing Prototype
Week 7: Developing Prototype and submission for Peer User Testing and Assignment 2
Minor deviations from initial plans
- Opted to not provide a default image when loading into the page
- Implemented square/rectangle and circle/ellipses crop shapes. Decided not to implement triangle, hexagon and star shapes as it proved too difficul
- Opted to not implement custom shape feature
- Opted to not implement mouse stencil crop feature (the crop shape accommodates the mouse cursor and executes crop action when clicking on the image)
- Opted to not sound effect feedback to crop action
- Have not implemented “flip” transform feature (may implement in the future)
Future plans:
- Add keybind-manual near the bottom of the page
- Implement Random-positioning of cropped images when copy-pasted, instead of duplicates being pasted in the same position. May make the creative tool feel more fun and playful.
- Fix positioning of right panel, before “crop image” and “download image” buttons appear, to make it be on the same y-level as the left panel
- Add clear canvas button
- Make the default crop preview smaller when image is first imported (so users can more easily create their own crop dimensions without having the default crop preview obstruct their mouse)
- “Center crop preview” button
- Change the way to move around the crop preview (click and hold right click within the crop preview to move around)
- Have cropped image anchors points be visible even if cropped image is outside the canvas border
- Crop-llage font change?
- Cropped-image layer interface? (like photoshop?)
AI Acknowledgment
AI (Claude) was used in fixing code regarding webpage structure and style, and for assisting in the development of Crop-llage Prototype.